<template>
  <el-dialog :visible.sync="dialogVisible" title="套餐详情" width="43%" :before-close="handleClose">
    <template #title>
      <div class="custom-dialog-title">
        <div style="display: flex;border-bottom: 1px solid rgba(0, 0, 0, 0.05);padding-bottom: 30px;">
          <div style="background-color: #4C6EE2;border-radius: 20px;width: 4px;margin-right: 8px;">
          </div>
          <span class="title-text">套餐详情</span>
        </div>
      </div>
    </template>

    <div style="display: flex;justify-content: space-between">
      <div></div>
      <div style="width: 256px; height: 256px;">
        <el-carousel 
          v-if="parseImageUrls(objList.coverImage).length > 0"
          :interval="3000" 
          indicator-position="outside" 
          height="256px"
          arrow="always"
        >
          <el-carousel-item 
            v-for="(img, index) in parseImageUrls(objList.coverImage)" 
            :key="index"
          >
            <el-image 
              style="width: 100%; height: 100%; border-radius: 10px;"
              :src="img"
              fit="cover"
              :preview-src-list="parseImageUrls(objList.coverImage)"
            ></el-image>
          </el-carousel-item>
        </el-carousel>
        <div v-else style="width: 256px; height: 256px; display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc; border-radius: 10px;">
          暂无图片
        </div>
      </div>
      <div>
        <el-button style="margin-right: 10px;background-color: #4C6EE2;color: white;" @click="onEditEimt" size="small">编辑</el-button>
      </div>
    </div>

    <el-row>
      <el-col :span="18"><div class="grid-content bg-purple" style="display: flex;">
        <div style="font-size: 16px;font-weight: 600;color: black;">
          {{ objList.comboName }}
        </div>
        <span style="font-size: 12px;margin-left: 12px;margin-top: 5px;">
          销量：{{ objList.sales < 0 ? 0 : objList.sales}}
        </span>
        <span style="font-size: 12px;margin-left: 12px;margin-top: 5px;">
          限购：{{ (objList.limitPerUser == -1 ? "不限" : objList.limitPerUser) || "暂无"}}
        </span>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light" style="text-align: right;">
        <el-tag v-if="objList.type" type="blue" style="background-color: rgb(237, 240, 252);color: #4C6EE2;border: none;">{{ moldList[objList.type - 1].label }}</el-tag>
      </div></el-col>
    </el-row>

    <el-row style="margin-top: 12px;">
      <el-col :span="18"><div class="grid-content bg-purple" style="display: flex;">
        <div style="font-weight: 600;color: #4C6EE2;">
          ￥<span style="font-size: 24px;">{{ objList.price }}</span>
        </div>
        <span style="
            font-family: Source Han Sans;
            font-size: 14px;
            font-weight: normal;
            line-height: normal;
            letter-spacing: normal;
            text-decoration: line-through;
            color: #323232;
            margin-top: 5px;
            margin-left: 12px;
            ">
          ￥{{ objList.originalPrice }}
        </span>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light" style="text-align: right;">
        <!-- <el-tag v-if="objList.type">{{ moldList[objList.type - 1].label }}</el-tag> -->
      </div></el-col>
    </el-row>


    <div style="font-size: 16px;font-weight: 600;color: black;display: flex;margin-top: 20px;">
      <div style="background-color: #4C6EE2;border-radius: 20px;width: 2px;margin-right: 4px;height: 15px;margin-top: 3.5px;">
    </div>
       菜品清单
    </div>

    <div v-for="(items,index) in caipList">
      <div class="grid-zhucai-title">
        {{ items.name }}
      </div>
      <div style="display: flex;padding-bottom: 20px;" v-for="(item,indexs) in items.list">
        <div style="padding-right: 8px;width: 74px;height: 66px; ">
  <el-carousel 
    v-if="parseImageUrls(item.foodDish.image).length > 0"
    indicator-position="none" 
    height="66px"
    :autoplay="false"
    :arrow="parseImageUrls(item.foodDish.image).length > 1 ? 'hover' : 'never'"
  >
    <el-carousel-item 
      v-for="(img, imgIndex) in parseImageUrls(item.foodDish.image)" 
      :key="imgIndex"
    >
      <el-image 
        style="width: 66px; height: 66px; border-radius: 10px;"
        :src="img"
        fit="cover"
        :preview-src-list="parseImageUrls(item.foodDish.image)"
      ></el-image>
    </el-carousel-item>
  </el-carousel>
  <div v-else style="width: 66px; height: 66px; display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc; border-radius: 10px;">
    暂无图片
  </div>
</div>
        <div style="width: 63%;">
           <div style="font-size: 14px;color: black;">
            {{ item.foodDish.foodName }}
           </div>
           <div class="shi_topsn" style="margin-top: 12px;">
            食材：<span v-for="(items,index) in item.foodDish.foodIngredientsDishList" :key="index">
              {{ items.ingredientsName + (index == (item.foodDish.foodIngredientsDishList.length -1) ? "" : "，") }}
            </span> 
           </div>
           <div class="shi_topsn">
            食过敏源：{{ item.foodDish.allergy }}
           </div>
        </div>
        <div style="width: 30%;">
            <div style="color: #4C6EE2;text-align: right;display: flex;justify-content: flex-end">
               <div style="padding-right: 10px;">{{ item.foodDish.taste }}</div>
               <div>热量：{{ item.foodDish.heat }}千卡</div>
            </div>
        </div>
      </div>
    </div>

    
    <div style="font-size: 16px;font-weight: 600;color: black;display: flex;margin-top: 20px;">
      <div style="background-color: #4C6EE2;border-radius: 20px;width: 2px;margin-right: 4px;height: 15px;margin-top: 3.5px;">
    </div>
       套餐描述
    </div>
    <div style="padding: 10px 0;">
      {{ objList.description }}
    </div>
    <div style="font-size: 16px;font-weight: 600;color: black;display: flex;margin-top: 20px;">
      <div style="background-color: #4C6EE2;border-radius: 20px;width: 2px;margin-right: 4px;height: 15px;margin-top: 3.5px;">
    </div>
       食材清单
    </div>
    <div v-for="(item,index) in shicaiPorList" :key="index" style="display: flex;justify-content: space-between;font-family: Source Han Sans;
      font-size: 14px;
      color: #848484;
      padding-top: 5px;
      ">
        <span>{{ item.ingredientsName }}</span>
        <span>{{ item.num + (dict.type.foot_ingredient_type.filter(el=>el.value == item.unit)[0].label) }}</span>
    </div>
    
    <div style="font-size: 16px;font-weight: 600;color: black;display: flex;margin-top: 20px;">
      <div style="background-color: #4C6EE2;border-radius: 20px;width: 2px;margin-right: 4px;height: 15px;margin-top: 3.5px;">
    </div>
       热量
    </div>
    <div style="font-family: Source Han Sans;
      font-size: 14px;
      color: #848484;
      padding-top: 5px;
      ">
        <span>约 {{ heat }}千卡/一份</span>
    </div>

    <div style="font-size: 16px;font-weight: 600;color: black;display: flex;margin-top: 20px;">
      <div style="background-color: #4C6EE2;border-radius: 20px;width: 2px;margin-right: 4px;height: 15px;margin-top: 3.5px;">
    </div>
       过敏源
    </div>
    <div style="font-family: Source Han Sans;
      font-size: 14px;
      color: #848484;
      padding-top: 5px;
      ">
        <span>{{ objList.allergy }}</span>
    </div>

    <div style="font-size: 16px;font-weight: 600;color: black;display: flex;margin-top: 20px;">
      <div style="background-color: #4C6EE2;border-radius: 20px;width: 2px;margin-right: 4px;height: 15px;margin-top: 3.5px;">
    </div>
       备注
    </div>
    <div style="font-family: Source Han Sans;
      font-size: 14px;
      color: #848484;
      padding-top: 5px;
      ">
        <span>{{ objList.remark }}</span>
    </div>

    <div class="dialog-footer" style="text-align: center;" v-hasPermi="['food:combo:approval']"   v-if="objList.status == 2">
        <el-button style="background-color: #4C6EE2;color: white;" @click="reply(0)">同意</el-button>
        <el-button style="background-color: #4C6EE2;color: white;" @click="reply(3)">不同意</el-button>
      </div>
      <div class="dialog-footer" style="text-align: center;" v-else>
        <el-button @click="handleClose" style="background-color: #4C6EE2;color: white;">关闭</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { ComboParticulars, ComboUpdates } from '@/api/combo'

export default {
  dicts: ['foot_cuisine_type',"foot_ingredient_type"],
  data() {
    return {
      dialogVisible: false,
      objList: {},
      moldList: [
      {
        value: 1,
      label:"早餐"
      },
      {
        value: 2,
      label:"午餐"
      },
      {
        value: 3,
      label:"晚餐"
      }
      ],
      caipList: [],
      shicaiPorList: [],
      heat:0
    };
  },
  props: {
    packdetaId: {
      typeof: Number || String
    }
  },
  watch: {
    packdetaId: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.getDetails();
        }
      }
    }
  },
  mounted() {
    this.getDetails()
  },
  methods: {
    parseImageUrls(images) {
      try {
        if (typeof images === 'string') {
          return JSON.parse(images || '[]').map(el => el.url)
        } else if (Array.isArray(images)) {
          return images.map(el => el.url)
        }
        return []
      } catch (e) {
        return []
      }
    },
    
    async reply(val) {
      this.objList.status = val
      ComboUpdates(this.objList)
      this.dialogVisible = false;
      this.$emit("getlist")
    },
    
    onEditEimt() {
      this.dialogVisible = false;
      this.$emit("oneditEmit",this.objList)
    },
    
    async getDetails() {
      let T = this.dict.type.foot_cuisine_type
      console.log(T)
      if (!T) {
        T = []
      }
      if (this.packdetaId) {
        const res = await ComboParticulars(this.packdetaId)
        this.objList = res.data
        if (this.objList.listItem.length > 0) {
          this.heat = this.objList.listItem.reduce((total, item) => {
            return total + (Number(item.foodDish.heat) || 0);
          }, 0);
          const grouped = this.objList.listItem.reduce((acc, item) => {
            const existingGroup = acc.find(group => group[0].type === item.type);
            if (existingGroup) {
              existingGroup.push(item);
            } else {
              acc.push([item]);
            }
            return acc;
          }, []);
          const puT = []
          console.log(T)
          grouped.forEach(el => {
            puT.push({ name: T.filter(els => els.value == el[0].type)[0].label, list: el })
          });
          this.caipList = puT
          const shicaiList = []
          this.objList.listItem.forEach(el => {
            shicaiList.push(...el.foodDish.foodIngredientsDishList) 
          })

          const result = shicaiList.reduce((acc, item) => {
            const existingItem = acc.find(i => i.ingredientsName === item.ingredientsName);
            if (existingItem) {
              existingItem.num += item.num;
            } else {
              acc.push({ ...item });
            }
            return acc;
          }, []);

          this.shicaiPorList = result
        }
      }
    },
    
    handleClose() {
      this.dialogVisible = false;
    },
    
    handleCancel() {
      this.dialogVisible = false;
    },
    
    openDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped>
/* 小轮播图箭头样式调整 */
::v-deep .el-carousel__arrow {
  width: 16px;
  height: 16px;
  font-size: 12px;
  background-color: rgba(31, 45, 61, 0.2);
}
::v-deep .el-carousel__arrow:hover {
  background-color: rgba(31, 45, 61, 0.4);
}
::v-deep .el-carousel__arrow--left {
  left: 2px;
}
::v-deep .el-carousel__arrow--right {
  right: 2px;
}
.grid-zhucai-title{
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 0;
  line-height: normal;
  letter-spacing: normal;
  color: #323232;
}
.shi_topsn{
  font-family: Source Han Sans;
  font-size: 12px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #848484;
}

/* 轮播图样式调整 */
::v-deep .el-carousel {
  border-radius: 10px;
}
::v-deep .el-carousel__arrow {
  background-color: rgba(31, 45, 61, 0.3);
  color: #fff;
}
::v-deep .el-carousel__arrow:hover {
  background-color: rgba(31, 45, 61, 0.5);
}
::v-deep .el-carousel__indicators--outside {
  margin-top: 5px;
}
::v-deep .el-carousel__indicator.is-active button {
  background-color: #4C6EE2;
}
::v-deep .el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.package-details {
  font-family: Arial, sans-serif;
  color: #333;
}

.title-text {
  font-size: 18px;
  font-weight: 600;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>